<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">考试专栏</view>
			<view class="right" @click="toPage('record')">考试记录</view>
		</view>
		<scroll-view scroll-y="true" class="body">
			<!--入口-->
			<view class="entry">
				<view class="item flex-row" @click="toPage('detail?type=imitate')">
					<image src="../../../static/img/education/file.png"></image>
					<text>模拟考试</text>
					<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
				</view>
				<view class="item flex-row" @click="toPage('formal')">
					<image src="../../../static/img/education/date.png"></image>
					<text>正式考试</text>
					<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
				</view>
				<view class="item flex-row" @click="toPage('daily')">
					<image src="../../../static/img/education/daily.png"></image>
					<text>日常答题</text>
					<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
				</view>
			</view>
			<!--说明-->
			<view class="remark">
				<rich-text :nodes="notes"></rich-text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from "../../../components/uni-icons/uni-icons.vue";
export default{
	components: { uniIcons },
	data(){
		return {
			notes: ''
		}
	},
	onLoad(){
		this.getNotes();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 说明
		getNotes(){
			let _this = this;
			uni.request({
				url: this.$API.edutExamNotes,
				header: this.$API.get_head(),
				success: (res)=>{
					_this.notes = res.data.data.notice;
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	box-sizing: border-box;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - 88upx - var(--status-bar-height));
}

/*说明*/
.remark{
	padding: 0 20upx 20upx;
}
.remark .title{
	font-size: 32upx;
	font-weight: bold;
	text-indent: 20upx;
	position: relative;
}
.remark .title::before{
	content: '';
	width: 8upx;
	height: 32upx;
	background: red;
	position: absolute;
	top: 10upx;
	left: 0;
}
.remark .p{
	line-height: 1.4;
	margin-bottom: 20upx;
}

/*入口*/
.entry{
	padding: 20upx 20upx 0;
}
.entry .item{
	background: #fff;
	margin-bottom: 20upx;
	padding: 12upx 20upx;
	border-radius: 12upx;
	box-shadow: 0 0 6upx #ccc;
	justify-content: flex-start;
	position: relative;
}
.entry .item image{
	width: 80upx;
	height: 80upx;
	margin-right: 20upx;
}
.entry .item text{
	font-size: 32upx;
}
.entry .item uni-icons,
.entry .item .uni-icons{
	position: absolute;
	right: 20upx;
	top: 20upx;
}
</style>
